/*
 * @Description: 首页标题栏-默认
 * @Author: tao.xie
 * @Date: 2019-06-11 15:46:02
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-06-14 15:57:24
 */
<template>

  <title-bar :needBack="false">
    <weather-live
      slot="left"
      class="left"
    />
    <div
      class="flex1 flex-v flex-vc flex-hs"
    >
      <span class="center">下滑乘车</span>
      <img
        :src="require('../assets/arrow.png')"
        class="img"
      />
    </div>

    <div
      slot="right"
      class="right flex-h flex-vc"
    >
      <i
        class="icon iconfont icon-tixing"
        :class="hasUnReadNotice?'icon-tixing-notice':''"
        @click="_pushToNoticePage"
      ></i>
      <i
        class="icon iconfont icon-scancode"
        @click="_callScanQRCode"
      ></i>
    </div>
  </title-bar>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'
import WeatherLive from '../../../components/weather/WeatherLive'
import { isUserLogin } from '../../../utils/UserBeanUtils'
import { goLogin } from 'vue-xiaobu-utils'
import { getUnReadMessageCount } from '../api/api'
export default {
  components: {
    TitleBar,
    WeatherLive
  },
  props: {
    showSlideHint: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasUnReadNotice: false
    }
  },
  mounted() {
    document.addEventListener('resume', () => {
      this._getUnReadNotifeCount()
    })
    this._getUnReadNotifeCount()
  },
  methods: {
    _pushToNoticePage() {
      if (isUserLogin()) {
        window.location.assign('xbapp://open/city-app/notice.html?_tv=true&_rv=true')
      } else {
        goLogin()
      }
    },
    _callScanQRCode() {
      this.$BarcodeScanner.then(BarcodeScanner => {
        BarcodeScanner.scanQRCode(url => {
          if (url.indexOf('http') === 0 || url.indexOf('xbapp') === 0 || url.indexOf('jhxapp') === 0) {
            window.location.assign(url)
          } else {
            window.alert(url)
          }
        }, () => { })
      })
    },
    _getUnReadNotifeCount: async function () {
      let count = await getUnReadMessageCount()
      this.hasUnReadNotice = count > 0
    }
  }
}
</script>

<style scoped>
.left {
  position: absolute;
  left: 0px;
  padding: 0px 40px;
}
.center {
  width: 100%;
  text-align: center;
  color: #999;
  font-size: 12px; /*no*/
  line-height: 16px; /*no*/
  margin-top: 21px;
}
.img {
  width: 14px;
  height: 29px;
}
.right {
  position: absolute;
  right: 0px;
  padding: 0px 20px 0px 20px;
}
.right > .icon {
  font-size: 40px;
  color: #333333;
  padding: 0px 20px;
}
.icon-tixing-notice {
  position: relative;
}
.icon-tixing-notice::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: #f83e3e;
  border-radius: 50%;
}
</style>
